.sites-dropdown {
	&.is-open {
		height: 69px;
		.gridicons-chevron-down {
			transform: rotate( 180deg );
		}
	}

	.gridicons-chevron-down {
		align-self: center;
		color: lighten( $gray, 10% );
		flex-grow: 0;
		flex-shrink: 0;
		margin-right: 16px;
		transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.2s ease-in;
	}
}

.sites-dropdown__wrapper {
	background: $white;
	border: 1px solid lighten( $gray, 20% );
	border-width: 1px 1px 2px;
	border-radius: 4px;
	margin: 0;
	position: relative;
	width: 300px;

	@include breakpoint( "<660px" ) {
		width: 100%;
	}
}

.sites-dropdown.is-open .sites-dropdown__wrapper {
	position: relative;
	z-index: z-index( 'root', '.sites-dropdown.is-open .sites-dropdown__wrapper' );
	margin: 0;
}

.sites-dropdown__selected {
	cursor: pointer;
	display: flex;

	.is-open & {
		border-bottom: 1px solid lighten( $gray, 30% );
	}

	&:hover {
		.gridicons-chevron-down,
		.gridicons-chevron-up {
			color: darken( $gray, 20% );
		}
	}
}

.sites-dropdown .site-selector {
	padding: 0;
	position: static;
	overflow-y: auto;

	&.is-large {
		margin-top: 50px;
	}
}

.sites-dropdown .site-selector__sites {
	max-height: 30vh;
	border-radius: 0 0 2px 2px;
}

.sites-dropdown .site-selector .search {
	position: absolute;
		top: 67px;
		left: 0;
		right: 0;
}

.sites-dropdown .site-selector .search input {
	margin: 0;
	background-color: $white;
}

.sites-dropdown .site-selector .site {
	flex-grow: 1;
}
